<?php
session_start();
if(!empty($_SESSION['username'])){
    $api=new Api();
    switch ($_SERVER['REQUEST_URI']) {
        case '/keywords':
            $result=$api->keywords();
            header("Content-Type:application/json;charset=UTF-8");
            echo $result;
            exit();
            break;
        case '/site':
            $result=$api->site();
            header("Content-Type:application/json;charset=UTF-8");
            echo $result;
            exit();
            break;
        case '/proxies':
            $result=$api->proxies();
            header("Content-Type:application/json;charset=UTF-8");
            echo $result ;
            exit();
            break;
        case '/map':
            $result=$api->map();
            header("Content-Type:application/json;charset=UTF-8");
            echo $result ;
            exit();
            break;
        default:
            break;
    }
}else{
    header('location:../pages/examples/login.html');
}

/**
 * Api类
 */
class Api
{
    /**
     * Create操作
     * @return [type] [description]
     */
    function keywords(){
        $result=file_get_contents("http://devapi.yqing.cn/api/keyword/getKeywordsCount?token=4A2sD7U5Bq7eJ3kzwSM3CtMdvNL126Va");
        return $result;
    }
    function site(){
        $result=file_get_contents("http://devapi.yqing.cn/api/statistics_n/getSiteCount?token=4A2sD7U5Bq7eJ3kzwSM3CtMdvNL126Va");
        return $result;
    }
    function proxies(){
        $result=file_get_contents("http://devapi.yqing.cn/api/statistics_n/getProxyStatByTime?token=4A2sD7U5Bq7eJ3kzwSM3CtMdvNL126Va");
        return $result;
    }
    function map(){
        $result=file_get_contents("http://devapi.yqing.cn/api/statistics_n/getProxyStatByProvince?token=4A2sD7U5Bq7eJ3kzwSM3CtMdvNL126Va");
        return $result;
    }
}

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="./jquery.min.js"></script>
    <!-- jQuery 2.2.3 -->
    <!--    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>-->
    <style>
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0; font-size:12px;}
        li{ list-style:none;}
        ul{ margin:0;}
        a{ color:#0066CC; text-decoration:none;}
        a:hover{ color:#FF0000; text-decoration: underline;}
        .breakNewsblock {
            margin:0 auto;
            position:relative;
            width:800px;
            overflow:hidden;
        }
        .breakNewsblock h2 {
            background:transparent url(http://www.csrcode.cn/imagesforcode/201206/icon2.gif) no-repeat scroll 7px -307px;
            color:#8F1D21;
            float:left;
            font-size:12px;
            padding-left:25px;
        }
        .breakNewsblock h2 span{ float:right; padding-right:10px;}
        #breakNews {
            background:transparent url(http://www.csrcode.cn/imagesforcode/201206/backbar.gif) no-repeat scroll center top;float:left;height:138px;
            margin-top:5px;
            padding:0 0 3px 2px;
            width:275px;
        }
        #breakNews .list6 {color:#333333;float:left;height:115px;margin-top:11px;overflow:hidden;width:240px; padding-left:10px;
        }
        #breakNews .list6 li{ padding:3px 0;}
        #breakNews .hit {float:right;height:24px; margin-top:23px; width:17px;}
        #breakNews .hit span { display:block;float:left;height:13px; margin-bottom:6px;width:13px;}
    </style>
    <script language="javascript" type="text/javascript">
        function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll)
        {
            this.Speed = 10;
            this.Timeout = timeout;
            this.stopscroll =false;//是否停止滚动的标志位
            this.isSmoothScroll= isSmoothScroll;//是否平滑连续滚动
            this.LineHeight = 20;//默认高度。可以在外部根据需要设置
            this.NextButton = this.$(btnNext);
            this.PreviousButton = this.$(btnPrevious);
            this.ScrollContent = this.$(content);
            this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;//为了平滑滚动再加一遍

            if(this.PreviousButton)

            {
                this.PreviousButton.onclick = this.GetFunction(this,"Previous");
                this.PreviousButton.onmouseover = this.GetFunction(this,"MouseOver");
                this.PreviousButton.onmouseout = this.GetFunction(this,"MouseOut");
            }
            if(this.NextButton){
                this.NextButton.onclick = this.GetFunction(this,"Next");
                this.NextButton.onmouseover = this.GetFunction(this,"MouseOver");
                this.NextButton.onmouseout = this.GetFunction(this,"MouseOut");
            }
            this.ScrollContent.onmouseover = this.GetFunction(this,"MouseOver");
            this.ScrollContent.onmouseout = this.GetFunction(this,"MouseOut");

            if(autoStart)
            {
                this.Start();
            }
        }

        ScrollText.prototype = {

            $:function(element)
            {
                return document.getElementById(element);
            },
            Previous:function()
            {
                this.stopscroll = true;
                this.Scroll("up");
            },
            Next:function()
            {
                this.stopscroll = true;
                this.Scroll("down");
            },
            Start:function()
            {
                if(this.isSmoothScroll)
                {
                    this.AutoScrollTimer = setInterval(this.GetFunction(this,"SmoothScroll"), this.Timeout);
                }
                else
                {
                    this.AutoScrollTimer = setInterval(this.GetFunction(this,"AutoScroll"), this.Timeout);
                }
            },
            Stop:function()
            {
                clearTimeout(this.AutoScrollTimer);
                this.DelayTimerStop = 0;
            },
            MouseOver:function()
            {
                this.stopscroll = true;
            },
            MouseOut:function()
            {
                this.stopscroll = false;
            },
            AutoScroll:function()
            {
                if(this.stopscroll)
                {
                    return;
                }
                this.ScrollContent.scrollTop++;
                if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
                {
                    this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);
                }
                else
                {
                    if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
                    {
                        this.ScrollContent.scrollTop = 0;
                    }
                    clearTimeout(this.ScrollTimer);
                    //this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
                }
            },
            SmoothScroll:function()
            {
                if(this.stopscroll)
                {
                    return;
                }
                this.ScrollContent.scrollTop++;
                if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
                {
                    this.ScrollContent.scrollTop = 0;
                }
            },
            Scroll:function(direction)
            {

                if(direction=="up")
                {
                    this.ScrollContent.scrollTop--;
                }
                else
                {
                    this.ScrollContent.scrollTop++;
                }
                if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
                {
                    this.ScrollContent.scrollTop = 0;
                }
                else if(parseInt(this.ScrollContent.scrollTop)<=0)
                {
                    this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
                }

                if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
                {
                    this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
                }
            },
            GetFunction:function(variable,method,param)
            {
                return function()
                {
                    variable[method](param);
                }
            }
        }

        function ignoreError() {
            return true;
        }
        window.onerror = ignoreError;
    </script>
</head>
<body class="skin-blue sidebar-mini wysihtml5-supported sidebar-collapse">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="index.php" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>A</b>LT</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->

                    <!-- Notifications: style can be found in dropdown.less -->
                    <li class="dropdown notifications-menu">


                    </li>
                    <!-- Tasks: style can be found in dropdown.less -->
                    <li class="dropdown tasks-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">


                        </a>
                        <ul class="dropdown-menu">

                            <li>
                                <!-- inner menu: contains the actual data -->
                                <ul class="menu">

                                    <!-- end task item -->

                                    <!-- end task item -->

                                    <!-- end task item -->
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#">View all tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="login/logout.php" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                            <span class="hidden-xs">退出</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                                <p>
                                    Alexander Pierce - Web Developer
                                    <small>Member since Nov. 2012</small>
                                </p>
                            </li>
                            <!-- Menu Body -->
                            <li class="user-body">
                                <div class="row">
                                    <div class="col-xs-4 text-center">
                                        <a href="#">Followers</a>
                                    </div>
                                </div>
                                <!-- /.row -->
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">Profile</a>
                                </div>
                                <div class="pull-right">
                                    <a href="login/logout.php" class="btn btn-default btn-flat">Sign out</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                    <li>

                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>Alexander Pierce</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li class="header">MAIN NAVIGATION</li>
                <li class="active treeview">
                    <a href="#">
                        <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>
                    <ul class="treeview-menu">
                        <li class="active"><a href="index.php"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
                    </ul>
                </li>











            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Dashboard
                <small>Control panel</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3 id="keywords"></h3>

                            <p>关键词数量</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3 id="site"></h3>

                            <p>站点数量</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->

                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->

                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->
            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-7 connectedSortable">
                    <!-- Custom tabs (Charts with tabs)-->
                    <div class="nav-tabs-custom">
                        <!-- Tabs within a box -->
                        <ul class="nav nav-tabs pull-right">
                            <!--<li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>-->
                            <!--<li><a href="#sales-chart" data-toggle="tab">Donut</a></li>-->
                            <li class="pull-left header"><i class="fa fa-inbox"></i> 代理数量</li>
                        </ul>
                        <div class="tab-content no-padding">
                            <!-- Morris chart - Sales -->
                            <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
                            <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                        </div>
                    </div>
                    <!-- /.nav-tabs-custom -->

                    <!-- Chat box -->
                    <div class="box box-success" style="height: 410px;">
                        <div class="box-header">
                            <i class="fa fa-comments-o"></i>

                            <h3 class="box-title"> downloader QPS</h3>

                        </div>
                        <div class="box-body chat" id="chat-box" style="height: 360px;">
                            <!-- chat item -->
                            <div style="width:804.75px;height: 360px; " id="gauge23">

                                <!-- /.attachment -->
                            </div>
                            <!-- /.item -->
                            <!-- chat item -->

                            <!-- /.item -->
                            <!-- chat item -->

                            <!-- /.item -->
                        </div>
                        <!-- /.chat -->

                    </div>
                    <!-- /.box (chat box) -->

                    <!-- TO DO List -->
                    <div class="box box-primary">
                        <div class="box-header">
                            <i class="ion ion-clipboard"></i>

                            <h3 class="box-title">To Do List</h3>


                        </div>
                        <!-- /.box-header -->
                        <div class="box-body" style="height: 160px;">
                            <!--              <div class="breakNewsblock">-->
                            <!--                <div id="breakNews">-->
                            <!--                  <ul id="breakNewsList" class="list6">-->
                            <!--                    <li><a href="#" target="_blank">固定元素与浮动元素相结合的CSS范例</a></li>-->
                            <!--                    <li><a href="#" target="_blank">Float 左对齐与右对齐交叉布局范例代码</a></li>-->
                            <!--                    <li><a href="#" target="_blank">一个CSS居右浮动的实例</a></li>-->
                            <!--                    <li><a href="#" target="_blank">响应鼠标三态变化的隔行变色表格</a></li>-->
                            <!--                    <li><a href="#" target="_blank">响应鼠标滚动的jQuery动感菜单</a></li>-->
                            <!--                    <li><a href="#" target="_blank">方法简单效果好的纯CSS圆角</a></li>-->
                            <!--                    <li><a href="#" target="_blank">JavaScript 列出每个星期7天的具体日期</a></li>-->
                            <!--                  </ul>-->
                            <!--                  <div class="hit">-->
                            <!--                    <span><a style="cursor: pointer;"><img width="11" height="10" id="pre2" alt="上一条" src="http://www.csrcode.cn/imagesforcode/201206/none.gif"/></a></span>-->
                            <!--                    <span><a style="cursor: pointer;"><img width="11" height="10" id="next2" alt="下一条" src="http://www.csrcode.cn/imagesforcode/201206/none.gif"/></a></span>-->
                            <!--                  </div>-->
                            <!--                </div>-->
                            <!--              </div>-->

                        </div>
                        <!-- /.box-body -->

                    </div>
                    <!-- /.box -->

                    <!-- quick email widget -->
                    <div class="box box-info">
                        <div class="box-header">
                            <i class="fa fa-envelope"></i>

                            <h3 class="box-title">Quick Email</h3>
                            <!-- tools box -->
                            <div class="pull-right box-tools">
                                <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
                                    <i class="fa fa-times"></i></button>
                            </div>
                            <!-- /. tools -->
                        </div>
                        <div class="box-body">
                            <form action="#" method="post">
                                <div class="form-group">
                                    <input type="email" class="form-control" name="emailto" placeholder="Email to:">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="subject" placeholder="Subject">
                                </div>
                                <div>
                                    <textarea class="textarea" placeholder="Message" style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="box-footer clearfix">
                            <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
                                <i class="fa fa-arrow-circle-right"></i></button>
                        </div>
                    </div>

                </section>
                <!-- /.Left col -->
                <!-- right col (We are only adding the ID to make the widgets sortable)-->
                <section class="col-lg-5 connectedSortable">

                    <!-- Map box -->
                    <div class="box box-solid bg-light-blue-gradient">
                        <div class="box-header">
                            <!-- tools box -->
                            <div class="pull-right box-tools">
                                <!--<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range">-->
                                <!--<i class="fa fa-calendar"></i></button>-->
                                <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
                                    <i class="fa fa-minus"></i></button>
                            </div>
                            <!-- /. tools -->

                            <i class="fa fa-map-marker"></i>

                            <h3 class="box-title">
                                代理分布
                            </h3>
                        </div>
                        <div class="box-body">
                            <div id="world-map" style="height: 275px; width: 100%;"></div>
                        </div>
                        <!-- /.box-body-->

                    </div>
                    <!-- /.box -->

                    <!-- solid sales graph -->
                    <div class="box box-solid bg-teal-gradient">
                        <div class="box-header">
                            <i class="fa fa-th"></i>

                            <h3 class="box-title" style="color: black;">犯罪类型数量汇总</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body border-radius-none">
                            <div class="chart" id="line-chart" style="height: 330px;"></div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer no-border">
                            <div class="row">
                                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">

                                    <div class="knob-label"></div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">

                                </div>
                                <!-- ./col -->
                                <div class="col-xs-4 text-center">

                                </div>
                                <!-- ./col -->
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.box-footer -->
                    </div>
                    <!-- /.box -->

                    <!-- Calendar -->
                    <div class="box box-solid">
                        <div class="box-header">

                            <h3 class="box-title"> 实时数据</h3>
                            <!-- tools box -->
                            <div class="pull-right box-tools">
                                <!-- button with a dropdown -->
                                <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                            <!-- /. tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body no-padding">
                            <!--The calendar -->
                            <div id="calendar" style="width: 100%"></div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer text-black">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- Progress bars -->
                                    <div class="clearfix">
                                        <div class="breakNewsblock">
                                            <div id="breakNews">
                                                <ul id="breakNewsList" class="list6">
                                                    <li><a href="#" target="_blank">固定元素与浮动元素相结合的CSS范例</a></li>
                                                    <li><a href="#" target="_blank">Float 左对齐与右对齐交叉布局范例代码</a></li>
                                                    <li><a href="#" target="_blank">一个CSS居右浮动的实例</a></li>
                                                    <li><a href="#" target="_blank">响应鼠标三态变化的隔行变色表格,响应鼠标三态变化的隔行变色表格</a></li>
                                                    <li><a href="#" target="_blank">响应鼠标滚动的jQuery动感菜单</a></li>
                                                    <li><a href="#" target="_blank">方法简单效果好的纯CSS圆角</a></li>
                                                    <li><a href="#" target="_blank">JavaScript 列出每个星期7天的具体日期</a></li>
                                                </ul>
                                                <div class="hit">
                                                    <span><a style="cursor: pointer;"><img width="11" height="10" id="pre2" alt="上一条" src="http://www.csrcode.cn/imagesforcode/201206/none.gif"/></a></span>
                                                    <span><a style="cursor: pointer;"><img width="11" height="10" id="next2" alt="下一条" src="http://www.csrcode.cn/imagesforcode/201206/none.gif"/></a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.row -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box box-solid">
                        <div class="box-header">

                            <h3 class="box-title"> ****</h3>
                            <!-- tools box -->
                            <div class="pull-right box-tools">
                                <!-- button with a dropdown -->
                                <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                            <!-- /. tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body no-padding">
                            <!--The calendar -->
                            <div id="calendar" style="width: 100%"></div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer text-black">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- Progress bars -->
                                    <div class="clearfix">
                                        <div class="chart" id="line-chart" style="height: 330px;"></div>
                                        <!-- /.row -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box -->
                </section>
                <!-- right col -->

            </div>
            <!-- /.row (main row) -->

        </section>
        <!-- /.content -->

    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.3.6
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
        reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                                <p>New phone +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                                <p>Execution time 5 seconds</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Resume
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel Integration
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Back End Framework
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Allow mail redirect
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Expose author name in posts
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Show me as online
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Turn off notifications
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Delete chat history
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->


<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="js/raphael-min.js"></script>
<!--<script src="plugins/morris/morris.min.js"></script>-->
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<!--<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<!--<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>-->
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>-->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="dist/js/pages/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</body>
</html>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="chinaMap.js"></script>
<!--<script type="text/javascript" src="dynamic-data2.js"></script>-->
<script type="text/javascript" src="gauge.js"></script>
<script type="text/javascript" src="bar-tick-align.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script language="javascript" type="text/javascript">
var scroll2 = new ScrollText("breakNewsList","pre2","next2",true,70,true);
scroll2.LineHeight = 24;
</script>
